<template>
  <div>
    <button
      style="padding: 20px; background: #0ff; color: #fff; margin-right: 10px"
      v-createInstruct:color="'true'"
    >
      新建
    </button>
    <button
      style="padding: 20px; background: #0ff; color: #fff; margin-right: 10px"
      v-createInstruct:color1="perStr"
    >
      自定义指令使用
    </button>
    <button
      style="padding: 20px; background: #0ff; color: #fff; margin-right: 10px"
      v-createInstruct:color="'false'"
    >
      删除
    </button>
    <button
      style="padding: 20px; background: #0ff; color: #fff; margin-right: 10px"
      v-createInstruct:color="'true'"
      @click="changeper('sdassd')"
    >
      同步
    </button>
    <van-tabs v-model="active">
      <van-tab title="视频VIDEO">
        <VideoIndex />
      </van-tab>
      <van-tab title="音频MUSIC">
        <VueMusic />
      </van-tab>
      <van-tab title="富文本Vue-Quill-Editor">
        <div style="width: 80%; margin: 0 auto">
          <VueQuillEditor />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup>
import VideoIndex from "../components/videoIndex.vue";
import VueMusic from "../components/vueMusic.vue";
import VueQuillEditor from "../components/VueQuillEditor.vue";

let active = ref<number>(0);
let perStr = ref<string>("false");
const changeper = (val) => {
  perStr.value = val;
  console.log(perStr.value);
};
// export default {
// 	name: 'App',
// 	data() {
// 		return {
// 			active: 0,
// 			starNumber: 100,
// 			rainNumber: 100
// 		};
// 	},
// 	components: {
// 		VideoIndex,
// 		VueMusic,
// 		VueQuillEditor
// 	},
// 	setup() {

// 	},
// 	mounted() {
// 	},
// 	methods: {
// 		// antvG2(){
// 		// 	this.$router.push({path:'antvG2'})
// 		// },
// 		// tinymotionModel(){
// 		// 	this.$router.push({path:'motionModel'})
// 		// 	},
// 		// getLinkView(){
// 		// 	this.$router.push({path:'LinkView'})
// 		// },
// 		// timeModel(){
// 		// 	this.$router.push({path:'TimeModel'})
// 		// },
// 		// threeModel(){
// 		// 	this.$router.push({ path: 'ThrModel' });
// 		// },
// 		// charts(){
// 		// 	this.$router.push({ path: 'ChartsIndex' });
// 		// 	},
// 		// // css样式效果
// 		// just1() {
// 		// 	this.$router.push({ path: 'CssMack' });
// 		// },
// 		// swiper(){
// 		// this.$router.push({path:'Swi'})
// 		// },
// 		// sc(){
// 		// 	this.$router.push({path:'Sc'})
// 		// }

// 	}
// };
</script>

<style lang="scss"></style>
